<template>
	<view class="addbox">
		<view class="map">
			<map id="map" style="width: 100%; height: 100%;" 
			:latitude="latitude" :longitude="longitude" :markers="covers" 
			:scale="scale"
			></map>
			<view class="select-address" @click.stop="getAddress">地图选址</view>
		</view>
		<view class="bg-white px30">
			<view class="py30 bor-bot">
				<view>回收箱主图：</view>
				<view class=" mt30">
					<scroll-view scroll-x="true" class="pic-list">
						<view class="uploading" @click.stop="uploadpiconly" v-if="image">
							<image class="imgwh" :src="image" mode=""></image>
						</view>
						<view class="uploading" v-else @click.stop="uploadpiconly">
							<image class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/serve-app/uploading.png" mode=""></image>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="py30 bor-bot">
				<view>回收箱图片：</view>
				<view class=" mt30">
					<scroll-view scroll-x="true" class="pic-list">
						<view class="uploading" v-for="(item,index) in piclist" :key="index">
							<image class="imgwh" :src="item" mode=""></image>
							<image @click="del(index)" class="cancel" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/serve-app/login03.png" mode="aspectFit"></image>
						</view>
						<view class="uploading" v-if="piclist.length<9" @click.stop="uploadpic">
							<image class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/serve-app/uploading.png" mode=""></image>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="py30 bor-bot acea-row row-between-wrapper">
				<view>回收箱名字：</view>
				<input v-model="name" class="text-right" type="text" placeholder="请输入名字" placeholder-class="color999 fs-26">
			</view>
			<view class="py30 bor-bot acea-row row-between-wrapper">
				<view>回收箱阈值：</view>
				<input v-model="capacity_max" class="text-right" type="text" placeholder="回收箱阈值" placeholder-class="color999 fs-26">
			</view>
			<view class="py30 bor-bot acea-row row-between-wrapper">
				<view>回收箱编号：</view>
				<input v-model="number" class="text-right" type="text" placeholder="回收箱编" placeholder-class="color999 fs-26">
			</view>
			<view class="py30 bor-bot acea-row row-between-wrapper">
				<view>回收箱地址：</view>
				<!-- <input v-model="address" class="text-right" type="text" placeholder="回收箱地址" placeholder-class="color999 fs-26"> -->
				<textarea class="address text-right" v-model="address" placeholder="回收箱地址" placeholder-class="color999 fs-26"></textarea>
			</view>
			<view class="py30">
				<view>地址备注：</view>
				<textarea v-model="mark" class="textarea mt20" placeholder="请填写" placeholder-class="color999 fs-26"></textarea>
			</view>
		</view>
		
		<view class="submit" @click="submit()">点击提交</view>
		
		<view class="acea-row row-center-wrapper">
			<image class="add-box" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/serve-app/add-box.png" mode="aspectFit"></image>
		</view>
		
	</view>
</template>

<script>
	import{
		savebox,
		boxinfo
	} from '@/api/news.js'
	export default {
		data() {
			return {
				id:0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 22.830904,
				longitude: 108.370988,
				scale:18,
				covers: [
					{
						latitude: 22.830904,
						longitude: 108.370988,
						iconPath: '../../../static/location.png'
					}
				],
				timer:null,
				piclist:[],
				address:'',
				name:'',
				number:'',
				capacity_max:'',
				mark:'',
				boxid:'',
				image:'',
			};
		},
		onLoad(option) {
			this.boxid = option.id || 0;
			if( !this.boxid ){
				this.$nextTick(()=>{
					this.initLocation();
				})
			}else{
				this.getdetail();
			}
		},
		onReady() {
			
		},
		methods:{
			getAddress(){
				let that = this;
				uni.chooseLocation({
					success: function (res) {
						that.address = res.address;
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						let covers = [
							{
								latitude: res.latitude,
								longitude: res.longitude,
								iconPath: '../../../static/location.png'
							}
						];
						that.covers = [...covers];
					}
				});
			},
			getdetail(){
				let that = this;
				boxinfo(this.boxid).then(res=>{
					let details = res.data;
					that.details = details;
					that.name = details.name;
					that.address = details.address;
					that.number = details.number;
					that.mark = details.mark;
					that.capacity_max = details.capacity_max;
					that.image = details.image;
					that.piclist = details.images
					setTimeout(()=>{
						that.latitude = Number(details.latitude);
						that.longitude = Number(details.longitude);
						let covers = [
							{
								latitude:  Number(details.latitude),
								longitude: Number(details.longitude),
								iconPath: '../../../static/location.png'
							}
						];
						that.covers = [...covers];
					},200)
				})
			},
			del(index){
				this.piclist.splice(index,1)
			},
			submit(){
				let that = this;
				let data = {
					image : that.image,
					images : that.piclist,
					longitude : that.longitude,
					latitude : that.latitude,
					address : that.address,
					name :  that.name,
					number : that.number,
					capacity_max : that.capacity_max,
					mark : that.mark,
					id : that.boxid || 0
				}
				savebox(data).then(res=>{
					that.$util.Tips({ title : res.msg },()=>{
						uni.navigateBack();
					})
				}).catch(err=>{
					that.$util.Tips({ title : err })
				})
				// uni.navigateTo({
				// 	url: '/pages/users/add-status'
				// })
			},
			uploadpiconly(){
				let that = this;
				that.$util.uploadImageChange('upload/image', (res) => {
					that.image = res.data.url;
				});
			},
			uploadpic: function() {
				let that = this;
				that.$util.uploadImageChange('upload/image', (res) => {
					that.piclist.push(res.data.url)
				});
			},
			initLocation(){
				let that = this;
				// that.timer = setInterval(()=>{
					that.getlocation();
				// },1000)
			},
			getlocation(){
				let that = this;
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					isHighAccuracy: true,
					highAccuracyExpireTime: 4000,
					geocode: true,
					success: function (res) {
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						console.log(res);
						that.address = res.address.province + res.address.city + res.address.district + res.address.street + res.address.streetNum + '号' + res.address.poiName
						let covers = [
							{
								latitude: res.latitude,
								longitude: res.longitude,
								iconPath: 'https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/map-person-icon.png'
							}
						];
						that.covers = [...covers];
					},
					fail:function(err){
						that.$util.Tips({ title : err })
					}
				});
			}
		},
		onHide() {
			clearInterval(this.timer)
		},
		onUnload() {
			clearInterval(this.timer)
		}
	}
</script>

<style lang="scss" scoped>
	.addbox{
		
		.map{
			width: 100%;
			height: 550rpx;
			background-color: #eeeeee;
			position: relative;
			
			.select-address{
				width: 150rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #0AD08C;
				color: #ffffff;
				text-align: center;
				border-radius: 10rpx;
				position: absolute;
				bottom: -80rpx;
				right: 0;
				z-index: 9999;
			}
		}
		

		
		input{
			width: 500rpx;
		}
		
		.address{
			width: 500rpx;
			height: 80rpx;
			font-size: 30rpx;
		}
		
		
		.btn{
			width: 260rpx;
			height: 60rpx;
			background: rgba(10, 208, 140, 0.2);
			border-radius: 30rpx;
			text-align: center;
			line-height: 60rpx;
			color: #0AD08C;
			font-size: 30rpx;
		}
		
		.submit{
			background: rgba(10, 208, 140, 0.2);
			width: 690rpx;
			line-height: 100rpx;
			border-radius: 50rpx;
			text-align: center;
			margin: 50rpx auto;
			color: #0AD08C;
			font-size: 32rpx;
		}
		
		.add-box{
			width: 215rpx;
			height: 84rpx;
			margin: 50rpx auto;
		}
		
		.pic-list{
			width: 100%;
			white-space: nowrap;
		}
		
		.uploading{
			width: 120rpx;
			height: 120rpx;
			display: inline-block;
			margin-right: 20rpx;
			position: relative;
			
			.cancel{
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 999;
			}
		}
		
		.textarea{
			width: 690rpx;
			height: 150rpx;
			background-color: #E4E4E4;
			border-radius: 8rpx;
			padding: 20rpx;
		}
		
	}
</style>
